﻿<script src="~/res/assets/plugins/moment/moment.js"></script>
<script src="~/res/assets/plugins/bootstrap-daterangepicker/daterangepicker.js" charset="utf-8"></script>
<script src="~/res/assets/plugins/bootstrap-datepicker/bootstrap-datepicker.min.js" charset="utf-8"></script>
<script src="~/res/assets/plugins/bootstrap-select/js/bootstrap-select.min.js"></script>
<script src="~/res/assets/plugins/bootstrap-select/js/i18n/defaults-zh_CN.min.js"></script>
<div id="demo">
    <div class="row">

        <div class="col-12">
            <div class="card">
                <div class="card-body">

                    <form class="form-inline">
                        <div class="form-group">

                            <label class="mx-sm-2">仓库</label>
                            <select class="form-control" id="LTBW_DID">
                                <option value="0" selected>全部仓库</option>
                                <option v-for="y in WarehouseList" :value="y.TBW_DID">{{y.TBW_NAME}}</option>
                            </select>

                            <label class="mx-sm-2">供应商</label>
                            <input type="text" class="form-control mx-sm-2" id="LTBS_NAME">

                            <label class="mx-sm-2">入库日期</label>
                            <div class="input-group">
                                <input type="text" name="daterange" class="form-control input-daterange-datepicker"
                                       value="2019/01/01 - 2019/01/31" id="LTWI_DATE_LIKE">
                                <span class="input-group-addon"><i class="icon-calender"></i></span>
                            </div>

                            <button type="button" class="btn waves-effect waves-light btn-success mx-sm-2" v-on:click="Query"><i class="fa fa-search"></i> 查询</button>
                            <button type="button" class="btn waves-effect waves-light btn-info" v-on:click="OpenMode()"><i class="fa fa-plus"></i> 新增</button>
                        </div>
                    </form>

                    <p />
                    <div class="table-responsive">
                        <table class="table table-striped" id="DataTable">
                            <thead>
                                <tr>
                                    <th>单号</th>
                                    <th>入库日期</th>
                                    <th>仓库</th>
                                    <th>制单人</th>
                                    <th class="text-nowrap">操作</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr v-for="x in DataList">
                                    <td>{{x.TWI_DOC}}</td>
                                    <td>{{x.TWI_DATE_F}}</td>
                                    <td>{{x.TBW_NAME}}</td>
                                    <td>{{x.CREATER_NAME}}</td>
                                    <td class="text-nowrap">
                                        <a data-toggle="tooltip" data-original-title="Edit" v-on:click="OpenMode(x)"> <i class="fa fa-pencil text-inverse m-r-10"></i> </a>
                                        <a data-toggle="tooltip" data-original-title="Close" v-on:click="Delete(x)"> <i class="fa fa-close text-danger"></i> </a>
                                    </td>
                                </tr>

                                <tr v-if="DataList.length == 0">
                                    <td colspan="5" style="text-align:center"><h4>暂无数据</h4></td>
                                </tr>
                            </tbody>
                            <tfoot>
                                <tr>
                                    <td colspan="5">
                                        <div>
                                            <ul class="pagination justify-content-end" style="margin-bottom: 0px;">
                                                <li class="page-item" style="line-height: 1.25;padding: .5rem .75rem;font-size: 14px;">
                                                    共 {{Pagings.count}} 条， 10 条/页，当前第 {{Pagings.index}} 页
                                                </li>
                                                <li class="page-item" v-if="Pagings.P"><a class="page-link" v-on:click="QueryPageP">上一页</a></li>
                                                <li class="page-item" v-if="Pagings.N"><a class="page-link" v-on:click="QueryPageNet">下一页</a></li>
                                            </ul>
                                        </div>
                                    </td>
                                </tr>
                            </tfoot>
                        </table>
                    </div>
                </div>
            </div>
        </div>

    </div>
    <div id="UserModal" class="modal fade in" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <form class="modal-content" novalidate>
                <div class="modal-header">
                    <h4 class="modal-title" id="myModalLabel">入库单</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                </div>
                <div>
                    <div class="form-body">

                        <div class="row">
                            <div class="col-lg-12">
                                <div class="card-outline-info">
                                    <div class="card-body">
                                        <div class="form-body">

                                            <div class="row">
                                                <div class="form-inline col-md-6">
                                                    <div class="input-group">
                                                        <label class="form-Newlable" style="width: 93px;">入库日期<span class="text-danger">*</span></label>
                                                        <input type="text" class="form-control mydatepicker" style="width:186px;" name="入库日期" placeholder="yyyy-mm-dd" v-validate="'required'" id="TWI_DATE_F">
                                                        <span class="input-group-addon"><i class="icon-calender"></i></span>
                                                    </div>

                                                    <span style="color:red;text-align:right" v-cloak class="col-md-8">{{ errors.first('入库日期') }}</span>
                                                </div>
                                                <div class="form-inline col-md-6">
                                                    <label class="form-Newlable" style="width: 93px;">仓库<span class="text-danger">*</span></label>

                                                    <select class="form-control" v-model="GridData.TBW_DID" style="width: 228px;" name="仓库" v-validate="'required'">
                                                        <option value="" selected></option>
                                                        <option v-for="y in WarehouseList" :value="y.TBW_DID">{{y.TBW_NAME}}</option>
                                                    </select>

                                                    <span style="color:red;text-align:right" v-cloak class="col-md-8">{{ errors.first('仓库') }}</span>
                                                </div>
                                            </div>

                                            <div class="row m-t-10">
                                                <div class="form-inline col-md-6">
                                                    <label class="form-Newlable ">入库单号<span class="text-danger">*</span></label>
                                                    <input type="text" class="form-control mx-sm-2" v-model="GridData.TWI_DOC" name="入库单号" v-validate="'required'">
                                                    <span style="color:red;text-align:right" v-cloak class="col-md-8">{{ errors.first('入库单号') }}</span>
                                                </div>
                                                <div class="form-inline col-md-6">
                                                    <label class="form-Newlable">供应商</label>
                                                    <div id="select3" class="mx-sm-2 form-control" style="width:228px;padding:0">
                                                        <select name="gid" id="gid" class="form-control" data-live-search="true"></select>
                                                    </div>

                                                </div>
                                            </div>

                                            <div class="row m-t-10">
                                                <div class="form-inline col-md-6">
                                                    <label class="form-Newlable text-righ">经办人</label>
                                                    <input type="text" class="form-control mx-sm-2" v-model="GridData.TWI_OPERATOR">
                                                </div>
                                                <div class="form-inline col-md-6">
                                                    <label class="form-Newlable">制单人</label>
                                                    <input type="text" class="form-control mx-sm-2" v-model="GridData.CREATER_NAME" readonly>
                                                </div>
                                            </div>

                                            <div class="row m-t-10">
                                                <div class="col-md-12">
                                                    <label class="form-Newlable col-md-2" style="width: 90px;">备注</label>
                                                    <input type="text" class="form-control col-md-10" v-model="GridData.TWI_REMARKS">
                                                </div>
                                            </div>

                                            <div class="row m-t-10">
                                                <div class="table-responsive">
                                                    <table class="table table-bordered">
                                                        <thead>
                                                            <tr>
                                                                <th>商品名称</th>
                                                                <th>商品规格</th>
                                                                <th style="width:50px">单位</th>
                                                                <th style="width:100px">入库数量</th>
                                                                <th style="width:100px">单价</th>
                                                                <th style="width:100px">金额</th>
                                                                <th style="width:80px">操作</th>
                                                            </tr>
                                                        </thead>
                                                        <tbody>
                                                            <tr v-for="(x,index) in itemData">
                                                                <td>{{x.TBG_NAME}}</td>
                                                                <td>{{x.TBG_SPEC}}</td>
                                                                <td style="width:50px">{{x.TBG_NUIT}}</td>
                                                                <td style="width:100px"><input type="number" class="form-control" min="1" v-model="x.TWID_NUM"></td>

                                                                <td style="width:100px"><input type="number" class="form-control" min="1" v-model="x.TWID_PRICE"></td>
                                                                <td style="width:100px">
                                                                    {{x.TWID_MONEY = (x.TWID_PRICE * x.TWID_NUM).toFixed(2)}}
                                                                </td>

                                                                <td>
                                                                    <a data-toggle="tooltip" data-original-title="Close" v-on:click='itemData.splice(index, 1)'> <i class="fa fa-close text-danger"></i> </a>
                                                                </td>
                                                            </tr>
                                                            <tr>
                                                                <td colspan="3">
                                                                    <div id="ItemDiv" class="form-control" style="width:288px;padding:0;position: absolute;">
                                                                        <select name="ItemSelect" id="ItemSelect" class="form-control" style="width:288px;" data-live-search="true"></select>
                                                                    </div>
                                                                </td>
                                                                <td style="width:100px"><input id="ItemNum" type="number" min="1" class="form-control form-control-line"></td>
                                                                <td style="width:100px"><input id="ItemPrice" type="number" min="1" class="form-control form-control-line"></td>
                                                                <td>
                                                                    <button type="button" class="btn waves-effect waves-light btn-primary btn-warning" v-on:click="AddNew">添加</button>
                                                                </td>
                                                            </tr>
                                                        </tbody>


                                                    </table>

                                                </div>
                                            </div>

                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>


                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn waves-effect waves-light btn-primary btn-info" v-on:click="saveData">保存</button>
                    <button type="button" class="btn waves-effect waves-light btn-default btn-secondary" data-dismiss="modal">关闭</button>
                </div>
            </form>
        </div>
    </div>

</div>




<script type="text/javascript">

    Vue.use(VeeValidate);
    VeeValidate.Validator.localize('zh_CN');

    VeeValidate.Validator.localize({
        zh_CN: {
            messages: {
                required: function (name) { return name + "不能为空"; },
                email: function () { return "邮箱格式无效"; }
            }
        }
    });

    var vm = new Vue({
        el: "#demo",
        data: {
            Pagings: { index: 1, count: 0, P: false, N: true },
            DataList: [],
            GridData: {
                TBE_DID: "",
                TWI_DID: "",
                TBS_DID: "",
                TBW_DID: "",
                TWI_DATE: "",
                TWI_DOC: "",
                TWI_OPERATOR: "",
                TWI_REMARKS: "",
                CREATER_NAME: "",
                TWI_DATE_F: "",
                detList: []
            },
            WarehouseList: [],
            itemData: []
        },
        mounted: function () {
            $('#ItemSelect').selectpicker();
            $('#gid').selectpicker();
            $("#gid").on('shown.bs.select', function (e) {
                //获取下拉select里的输入框,提示一下搜索下拉
                $("#select3").find("input").attr('placeholder', "请输入供应商名称搜索");
                //绑定一下键盘输入
                $("#select3").find("input").keyup(function () {
                    var dangname = $(this).val();
                    if (dangname != '') {
                        vm.guestlist(dangname);
                    }
                })
            });

            $("#ItemSelect").on('shown.bs.select', function (e) {
                //获取下拉select里的输入框,提示一下搜索下拉
                $("#ItemDiv").find("input").attr('placeholder', "请输入商品名称/规格搜索");
                //绑定一下键盘输入
                $("#ItemDiv").find("input").keyup(function () {
                    var dangname = $(this).val();
                    if (dangname != '') {

                        $.post("../Essential/Goods",
                            { act: 'selectData', NAME_SPEC: dangname, BEGSIZE: 10, PAGEINDEX: 0 },
                            function (data) {
                                data = JSON.parse(data);
                                var html = '';
                                for (var i = 0; i < data.data.length; i++) {
                                    html += '<option value="' + data.data[i].TBG_DID + '">' + data.data[i].MERGE_TEXT + '</option>';
                                }
                                $("#ItemSelect").html(html);
                                $('#ItemSelect').selectpicker('refresh');
                            });

                    }
                })
            });

            $('.input-daterange-datepicker').daterangepicker({
                buttonClasses: ['btn', 'btn-sm'],
                applyClass: 'btn-danger',
                cancelClass: 'btn-inverse',
                locale: locale
            });

            jQuery('.mydatepicker, #datepicker').datepicker();            
            $.post("../Essential/Warehouse?act=data",
                function (data) {
                    data = JSON.parse(data);
                    for (var i = 0; i < data.data.length; i++) {
                        vm.WarehouseList.push(data.data[i]);
                    }
                }); 

            this.Query();
        },
        methods: {
            guestlist: function (datas) {
                $.post("../Essential/Supplier",
                    { act: 'selectData', TBS_NAME_LIKE: datas, BEGSIZE: 10, PAGEINDEX: 0 },
                    function (data) {
                        data = JSON.parse(data);
                        var html = '';
                        for (var i = 0; i < data.data.length; i++) {
                            html += '<option value="' + data.data[i].TBS_DID + '">' + data.data[i].TBS_NAME + '</option>';
                        }
                        $("#gid").html(html);
                        $('#gid').selectpicker('refresh');
                    });
            },
            Query: function () {
                this.Pagings = { index: 1, count: 0, P: false, N: true};
                this.QueryData();

                if (this.Pagings.count < 10) {
                    this.Pagings.N = false;
                }
            },
            QueryPageNet: function () {
                this.Pagings.index = this.Pagings.index + 1;
                this.Pagings.P = true;
                if ((10 * this.Pagings.index) >= this.Pagings.count) {
                    this.Pagings.N = false;
                }
                
                this.QueryData();
            },
            QueryPageP: function () {
                this.Pagings.index = this.Pagings.index - 1;
                this.Pagings.N = true;
                if (this.Pagings.index == 1) {
                    this.Pagings.P = false;
                }
                this.QueryData();
            },
            QueryData: function () {
                $(".preloader").fadeIn();//加载等待
                var _self = this;
                _self.DataList = [];
                $.post("../WMS/InStock?act=data",
                    {
                        TBW_DID: $("#LTBW_DID").val(), TBS_NAME: $("#LTBS_NAME").val(), TWI_DATE_LIKE: $("#LTWI_DATE_LIKE").val(),
                        BEGSIZE: 10, PAGEINDEX: _self.Pagings.index - 1
                    },
                    function (data) {
                        data = JSON.parse(data);
                        
                        for (var i = 0; i < data.data.length; i++) {
                            _self.DataList.push(data.data[i]);
                            _self.Pagings.count = data.data[i].PAGECOUNT;
                        }
                        $(".preloader").fadeOut();//取消加载等待
                    });
            },
            Delete: function (moX) {
                swal({
                    title: "确定要删除吗?",
                    text: "",
                    type: "warning",
                    showCancelButton: true,
                    confirmButtonColor: "#DD6B55",
                    confirmButtonText: "是",
                    cancelButtonText: "否",
                    closeOnConfirm: false,
                    closeOnCancel: true
                }, function (isConfirm) {
                    if (isConfirm) {
                        $.post("../WMS/InStock", { act: 'delete', TWI_DID: moX.TWI_DID },
                            function (data) {
                                data = JSON.parse(data);
                                if (data.status === 0) {
                                    //moX.TBG_STATUS = state;
                                    swal("操作成功!", "", "success");
                                    vm.Query();
                                } else {
                                    swal("操作失败!", data.message);
                                }
                            });
                    }
                });
            },
            OpenMode: function (moX) {
                vm.refC();
                this.itemData = [];
                var html = '';

                Date.prototype.Format = function (fmt) { //author: meizz
                    var o = {
                        "M+": this.getMonth() + 1, //月份
                        "d+": this.getDate(), //日
                        "h+": this.getHours(), //小时
                        "m+": this.getMinutes(), //分
                        "s+": this.getSeconds(), //秒
                        "q+": Math.floor((this.getMonth() + 3) / 3), //季度
                        "S": this.getMilliseconds() //毫秒
                    };
                    if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
                    for (var k in o)
                        if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
                    return fmt;
                }

                if (moX == undefined) {
                    this.GridData = {
                        TBE_DID: 0,
                        TWI_DID: 0,
                        TBS_DID: 0,
                        TBW_DID: "",
                        TWI_DATE: new Date().Format("yyyy-MM-dd"),
                        TWI_DOC: "IN-" + (new Date().Format("yyyyMMdd")) + "-" + (Math.floor(Math.random() * 9000) + 1000),
                        TWI_OPERATOR: "",
                        TWI_REMARKS: "",
                        CREATER_NAME: "",
                        TWI_DATE_F: new Date().Format("yyyy-MM-dd"),
                        detList: []
                    };
                    $("#TWI_DATE_F").val(this.GridData.TWI_DATE_F);
                    this.GridData.CREATER_NAME = getCookie( "TBA_NAME");
                } else {
                    if (moX.TBS_DID != 0) {
                        html += '<option value="' + moX.TBS_DID + '">' + moX.TBS_NAME + '</option>';
                    }
                    this.GridData = {
                        TBE_DID: moX.TBE_DID,
                        TWI_DID: moX.TWI_DID,
                        TWI_DID: moX.TWI_DID,
                        TBS_DID: moX.TBS_DID,
                        TBW_DID: moX.TBW_DID,
                        TWI_DATE: moX.TWI_DATE,
                        TWI_DOC: moX.TWI_DOC,
                        TWI_OPERATOR: moX.TWI_OPERATOR,
                        TWI_REMARKS: moX.TWI_REMARKS,
                        CREATER_NAME: moX.CREATER_NAME,
                        TWI_DATE_F: moX.TWI_DATE_F,
                        detList: []
                    };
                    //this.GridData = Object.assign({}, moX);

                    $("#TWI_DATE_F").val(this.GridData.TWI_DATE_F);

                    $.post("../WMS/InStock?act=detData",
                        { TWI_DID: moX.TWI_DID },
                        function (data) {
                            data = JSON.parse(data);
                            for (var i = 0; i < data.data.length; i++) {
                                vm.itemData.push(data.data[i]);
                            }
                        });
                }

                $("#gid").html(html);
                $('#gid').selectpicker('refresh');

                $('#UserModal').modal('toggle');
            },
            saveData: function () {
                this.$validator.validateAll().then((result) => {
                    if (result) {

                        if (this.itemData.length === 0) { swal("提示!", "请添加商品"); return; }

                        for (var z = 0; z < this.itemData.length; z++) {
                            if (this.itemData[z].TWID_NUM === "" || this.itemData[z].TWID_NUM === "0") {
                                swal("提示!", "第" + (z + 1) + "行，请输入要入库的数量");
                                return;
                            }
                        }
                        this.GridData.TWI_DATE_F = $("#TWI_DATE_F").val();
                        this.GridData.TBS_DID = $("#gid").val() == null ? 0 : $("#gid").val();

                        this.GridData.detList = this.itemData;

                        $.post("../WMS/InStock?act=save", { DStr: JSON.stringify(this.GridData) },
                            function (data) {
                                data = JSON.parse(data);
                                if (data.status === 0) {
                                    swal("操作成功!", "", "success");
                                    vm.Query();
                                    $('#UserModal').modal('toggle');
                                } else {
                                    swal("提示!", data.message);
                                }
                            });

                    }
                })
            },
            AddNew: function () {

                if ($("#ItemSelect option:selected").text() === "") {
                    swal("提示!", "请选择商品");
                    $("#ItemSelect").focus();
                    return;
                }
                if ($("#ItemNum").val() === "" || $("#ItemNum").val() === "0") {
                    swal("提示!", "请输入数量");
                    $("#ItemNum").focus();
                    return;
                }
                if ($("#ItemPrice").val() === "" || $("#ItemPrice").val() === "0") {
                    swal("提示!", "请输入单价");
                    $("#ItemNum").focus();
                    return;
                }

                var itemText = $("#ItemSelect option:selected").text();
                this.itemData.push(Object.assign({},
                    {
                        TWID_DID: 0,
                        TBG_DID: $("#ItemSelect").val(),
                        TBG_NAME: itemText.split('　')[0],
                        TBG_SPEC: itemText.split('　')[1],
                        TBG_NUIT: itemText.split('　')[2],
                        TWID_PRICE: $("#ItemPrice").val(),
                        TWID_NUM: $("#ItemNum").val(),
                        TWID_MONEY: $("#ItemNum").val() * $("#ItemPrice").val()
                    }));

                vm.refC();
            },
            refC: function () {
                $('#ItemSelect').selectpicker('val', ['noneSelectedText'])
                $("#ItemSelect").selectpicker('refresh');
                $("#ItemNum").val('');
                $("#ItemPrice").val('');
            }
        }
    });


</script>



<link href="~/res/assets/plugins/bootstrap-daterangepicker/daterangepicker.css" rel="stylesheet" />
<link href="~/res/assets/plugins/bootstrap-datepicker/bootstrap-datepicker.min.css" rel="stylesheet" />
<link href="~/res/assets/plugins/bootstrap-select/css/bootstrap-select.min.css" rel="stylesheet" />
